<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>

		省/直辖市 <select name="" id="province">
			<option value="">省/直辖市</option>
		</select>
		市/区 <select name="" id="city" disabled></select>
		
	</body>
</html>
<script>
	
	var arr1 = [
		{name: "北京", id: 1},
		{name: "河南", id: 2},
		{name: "日本省", id: 3}
	];

	var arr2 = [
		["朝阳区", "海淀区", "昌平区", "大兴区", "丰台"],
		["郑州", "兰考", "开封", "安阳", "洛阳", "南阳", "焦作"],
		["东京", "广岛", "长崎", "富士山"]
	];

	// 获取select
	var provinceSelect = document.getElementById('province');
	var citySelect = document.getElementById('city');

	arr1.forEach(function(item, i) {

		var option = document.createElement('option');
		option.value = item.id;
		option.innerHTML = item.name;
		provinceSelect.appendChild(option);

	});

	// 下拉框的值改变的时候会触发该方法
	provinceSelect.onchange = function() {

		citySelect.disabled = this.value ? false : true;
		citySelect.innerHTML = "";
		if (!this.value) return;
		for (var i = 0; i < arr2[this.value - 1].length; i++) {
			var option = document.createElement('option');
			option.innerHTML = arr2[this.value - 1][i];
			citySelect.appendChild(option);
		}
	};

	// 代码敲一遍
	// 自己写一个dom操作的例子
	// 预习 clientWidth clientHeight offsetHeight offsetWidth scrollTop





</script>